<template>
   <div>
     <el-input v-model="nickName" :disabled="true" :placeholder="props.placeholder">
       <template #append>
         <el-button icon="el-icon-search" @click="show"></el-button>
       </template>

     </el-input>
     <SelectUser ref="selectUserRef" @ok="handleSelectUser" />
   </div>
</template>

<script setup name="SelectUserInput">
import SelectUser from "@/components/SelectUser";
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import { getUser} from "@/api/system/user";
const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: [String, Number],
  },
  placeholder: {
    type: String,
    default: "请选择人员"
  }
});

const nickName = ref("");

onMounted(() => {
  setNickName(props.modelValue)
})

// 显示弹框
function show() {
  proxy.$refs["selectUserRef"].show();
}

function handleSelectUser(data) {
  nickName.value = data.nickName
  proxy.$emit("update:modelValue", data.userId)
}

/** 监听modelValue值的变化 */
watch(() => props.modelValue, (newVal, oldVal) => {
  setNickName(newVal)
});

/**
 * 获取并设置用户昵称
 * @param userId
 */
function setNickName(userId) {
  if(userId) {
    getUser(userId).then(response => {
      let user = response.data
      if(user) {
        nickName.value = user.nickName
      } else {
        nickName.value = ""
      }
    });
  } else {
    nickName.value = ""
  }
}

</script>

<style lang="scss" scoped>
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #FFFFFF;
}
:deep(.el-input.is-disabled) {
  cursor: default;
}
:deep(.el-input.is-disabled .el-input__inner) {
  cursor: default;
}
</style>